<?php
require_once '../server/Redis.php';
$token = $_GET['token'];
$redis = new Rediss();
$res =$redis->get('token_' . $token);
if (empty($res)) {
    header('location:http://' . $_SERVER['HTTP_HOST']);
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>会话_聊天机器人</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/chat.css">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body lang="zh">
<img style="width:100%;height:100%" src="images/001821hcp4pe22duuwee5r.jpg">
<div class="abs cover contaniner">
    <div class="abs cover pnl">
        <div class="top pnl-head"></div>
        <div class="abs cover pnl-body" id="pnlBody">
            <div class="abs cover pnl-left">
                <div class="abs cover pnl-msgs scroll" id="show">
                    <div class="msg min time" id="histStart">请选择聊天用户</div>
                    <div class="pnl-list" id="hists">
                        <!-- 历史消息 -->
                    </div>
                    <div class="pnl-list" id="msgs">
                        <div class="msg robot">
                            <!--                            <div class="msg-left" worker="管理员">-->
                            <!--                                <div class="msg-host photo" style="background-image: url(images/14761555537.png)"></div>-->
                            <!--                                <div class="msg-ball" title="今天 17:52:06">你好，我是只能打字的聊天机器人 <br><br>您是想要了解哪些方面呢？</div>-->
                            <!--                            </div>-->
                        </div>
                        <div class="msg guest">
                            <!--                            <div class="msg-right">-->
                            <!--                                <div class="msg-host headDefault"></div>-->
                            <!--                                <div class="msg-ball" title="今天 17:52:06">你好</div>-->
                            <!--                            </div>-->
                        </div>
                    </div>
                    <div class="pnl-list hide" id="unreadLine">
                        <div class="msg min time unread">未读消息</div>
                    </div>
                </div>
                <div class="abs bottom pnl-text">
                    <div class="abs top pnl-warn" id="pnlWarn">
                        <div class="fl btns rel pnl-warn-free">
                            <!--<img src="../Images/icon/Smile.png" class="kh warn-btn" title="表情" id="emojiBtn" />-->
                            <!--<img src="../Images/icon/pic.png" class="kh warn-btn" title="截屏" id="emojiBtn" />-->
                            <!--<img src="../Images/icon/camera.png" class="kh warn-btn" title="图片" id="emojiBtn" />-->
                            <!--<img src="../Images/icon/edit.png" class="kh warn-btn" title="保存" id="emojiBtn" />-->
                        </div>
                    </div>
                    <div class="abs cover pnl-input">
                        <textarea class="scroll" id="text" wrap="hard" placeholder="在此输入文字信息..."></textarea>
                        <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                            <ul class="atcom" id="atcom"></ul>
                        </div>
                    </div>
                    <div class="abs br pnl-btn" id="submit"
                         style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">发送
                    </div>
                    <div class="pnl-support" id="copyright"><a href="#">版权什么的</a></div>
                </div>
            </div>
            <div class="abs right pnl-right">
                <div class="slider-container hide"></div>
                <div class="pnl-right-content">
                    <div class="pnl-tabs">
                        <div class="tab-btn active" id="hot-tab">用户列表</div>
                    </div>
                    <div class="pnl-hot">
                        <ul class="rel-list unselect" id="hots">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/chat.js"></script>
<script src="layui/layui.all.js"></script>
<script>
    $(function () {
        var socket;//全局回话
        var toId;
        // 初始化链接
        WebSockets("<?php echo $token ?>", "");
        //回车发送
        document.onkeydown = function (e) {
            if (e.keyCode === 13) {
                var text = content();
                var id = toId ;
                if (id === undefined) {
                    layer.msg('请选择用户进行聊天');
                    return false;
                }
                SendMsg(text);
                var data = {content: text, toFrom: id};
                socket.send(JSON.stringify(data));
                return false;
            }
        };
        // 点击发送
        $('#submit').click(function () {
            var text = content();
            var id = toId ;
            if (id === undefined) {
                layer.msg('请选择用户进行聊天');
                return false;
            }
            SendMsg(text);
            var data = {content: text, toFrom: id};
            socket.send(JSON.stringify(data))
        });
        $(document).on('dblclick', '.username', function () {
            var id = $(this).data('id');
            var name = $(this).data('name');
            toId = id;
            $('#histStart').text('正在跟' + name + '进行聊天')
            $('#histStart').attr('data-id', id);

        });

        //获取发送内容
        function content() {
            var text = document.getElementById("text");
            return text.value;
        }

        function WebSockets(token) {
            // 打开一个 web socket 创建服务器连接
            socket = new WebSocket("ws://120.78.67.1:9505?token=" + token);
            socket.onopen = function (event) {
                // 连接成功会触发
                // Web Socket 已连接上，使用 send() 方法发送数据
                // var data = {content: content};
                // socket.send(JSON.stringify(data))
            };
            // 监听消息
            socket.onmessage = function (event) {
                var received_msg = JSON.parse(event.data);
                if (received_msg.code <= 1) {
                    if (received_msg.content.toFrom != undefined) {
                        $('#histStart').text('正在跟' + received_msg.user + '进行聊天')
                        $('#histStart').attr('data-id', received_msg.content.toFrom);
                        toId = received_msg.content.toFrom;
                        AddMsg(received_msg.user, received_msg.content.content);
                    }else {
                        AddMsg(received_msg.user, received_msg.content);
                        if (received_msg.other != undefined) {
                            content(received_msg.other);
                        }
                    }

                } else if (received_msg.code >= 10000) {
                    if (received_msg.other != undefined) {
                        content(received_msg.other);
                    }
                }
                // alert(received_msg);
            };
            // 出现错误
            socket.onerror = function (event) {
                console.log(event)
                // alert("连接出现错误...");
            };

            // 监听Socket的关闭
            socket.onclose = function (event) {
                // 关闭 websocket
//                alert('关闭连接')
                window.location.href='index.html'
            };

            function content(data) {
                var arr = '';
                $.each(data, function (k, v) {
                    arr += '<li class="rel-item username" style="display: block;width: 100%;height: 45px;background-color:bisque " data-id="' + k + '"  data-name="' + v.nickname + '" >\n' +
                        '<div class="msg-host photo" style="background-image: url(images/14761555537.png);float: left" ></div>\n' +
                        '<strong style="float: left;margin-top: 8px;font-size: 24px;margin-left: 20px">' + v.nickname + '</strong>\n' +
                        '</li>';
                })
                $('#hots').empty();
                $('#hots').append(arr);
            }
        }
    })

</script>
</html>